<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inpval" @keyup.enter="tianjia">
        <h1>未完成的事</h1>
        <ul>
            <li v-for="(item,index) in texts"  v-show="item.zhuangtai"><input type="checkbox" @click="gaibian(index)" v-model="item.aaa">{{item.text}} <button @click="shanchu(index)">删除</button></li>
        </ul>
        <h1>已完成的事</h1>
        <ul>
            <li v-for="(item,index) in texts" v-show="item.flag"><input type="checkbox" @click="huiqu(index)" v-model="item.aaa">{{item.text}} <button @click="shanchu(index)">删除</button></li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let pc = new Vue({
            el:"#app",
            data:{
                inpval:"",
                texts:[],

            },
            methods:{
                tianjia(){
                    let obj = {}
                    obj.text=this.inpval
                    obj.flag = false
                    obj.zhuangtai = true
                    obj.aaa=false
                    this.texts.push(obj)
                    this.inpval=""
                },

                gaibian(index){
                    this.texts[index].flag = !this.texts[index].flag
                    this.texts[index].zhuangtai = !this.texts[index].zhuangtai
                    this.texts[index].aaa = !this.texts[index].aaa

                },
                huiqu(index){
                    this.texts[index].flag = !this.texts[index].flag
                    this.texts[index].zhuangtai = !this.texts[index].zhuangtai
                    this.texts[index].aaa = !this.texts[index].aaa
                },
                shanchu(index){
                    this.texts.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>